<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选择主体类型</title>

    <link rel="stylesheet" href="../../../../bangnuo/css/operation/add_merchants_new.css">

    <script src="../../../../bangnuo/vue/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../../../../bangnuo/bootstrap/js/jquery-3.4.1.js"></script>
    <script src="../../../../bangnuo/vue/axios.min.js"></script>
    <script type="module" src="../../operation/js/config/public.js"></script>
    <style>
        .main-body{
            width: 80%;
            margin: 0 auto;
        }
        .input-header{
            margin: 0px auto;
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 158px;
            height: 158px;
            line-height: 158px;
            text-align: center;
        }
        .avatar {
            width: 158px;
            height: 158px;
            display: block;
        }


        .label-title-bottom{
            height: auto;
            margin-bottom:20px
        }

        .span-font-color{
            color: #409EFF
        }

    </style>
</head>
<body>
<div id="app">
    <div class="main-body">
    <div class="input-header">
        <el-row>
            <el-steps :space="200" :active="0" finish-status="success">
                <el-step title="主体信息"></el-step>
                <el-step title="经营信息"></el-step>
                <el-step title="结算规则"></el-step>
                <el-step title="结算账户"></el-step>
                <el-step title="超级管理员"></el-step>
                <el-step title="保存完成"></el-step>
            </el-steps>
        </el-row>
        <el-row style="width: 500px;margin-top: 40px">
            <el-form ref="form" :model="form" label-width="100px" label-position="left" width="50%">
                <div class="label-title-bottom">
                    <label><span class="span-font-color">|</span>营业执照</label>
                </div>
                <el-form-item label="营业执照照片">
                    <el-upload
                            class="avatar-uploader"
                            action="/upload/img"
                            :auto-upload="autoUpload"
                            name="file"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <!--用于上传图片预览-->
                        <img v-if="form.licenseCopy" :src="form.licenseCopy"  class="avatar">
                        <!--用于展示上传图标，当imageUrl为null时，就展示空白，当imageUrl有了值，就会展示指向该地址的图片-->
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="注册号">
                    <el-input v-model="form.licenseNumber"></el-input>
                </el-form-item>

                <el-form-item label="商户名称">
                    <el-input v-model="form.merchantName"></el-input>
                </el-form-item>

                <el-form-item v-if="type=='0'" label="经营者姓名">
                    <el-input v-model="form.legalPerson"></el-input>
                </el-form-item>

                <el-form-item v-if="type=='1' || type=='2' || type=='3'" label="法定代表人姓名">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>

                <!--type=2时需要内容-->
                <span v-if="type=='2' || type=='3'">
                     <el-form-item label="注册地址">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>

                <el-form-item label="有效期类型">
                    <el-radio v-model="validityOfCertificate" label="0">定期</el-radio>
                    <el-radio v-model="validityOfCertificate" label="1">长期</el-radio>
                </el-form-item>
                <el-form-item label="证件生效日期" required>
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker type="date" placeholder="选择日期" v-model="form.name" style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>

                <el-form-item v-if="validityOfCertificate!=1" label="证件失效日期" required>
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker type="date" placeholder="选择日期" v-model="form.name" style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                </span>

                <el-form-item v-if="type=='1' || type=='2' || type=='3'" label="类型">
                    <el-radio v-model="businessLicenseType" label="0">已三证合一</el-radio>
                    <el-radio v-model="businessLicenseType" label="1">未三证合一</el-radio>
                </el-form-item>
                <!--type=2时需要上传内容-->
                <el-form-item v-if="type=='2'" label="单位证明函照片">
                    <el-upload
                            class="avatar-uploader"
                            action="/upload/img2/permissionsPictureBank"
                            :auto-upload="autoUpload"
                            name="file"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <!--用于上传图片预览-->
                        <img v-if="img" :src="img"  class="avatar">
                        <!--用于展示上传图标，当imageUrl为null时，就展示空白，当imageUrl有了值，就会展示指向该地址的图片-->
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>


                <span v-if="businessLicenseType=='1' && (type=='1' || type=='2' || type=='3')">
                    <div class="label-title-bottom">
                        <label><span class="span-font-color">|</span>组织机构代码证</label>
                    </div>

                <el-form-item label="组织机构代码证照片">
                    <el-upload
                            class="avatar-uploader"
                            action="/upload/img2/permissionsPictureBank"
                            :auto-upload="autoUpload"
                            name="file"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <!--用于上传图片预览-->
                        <img v-if="img" :src="img"  class="avatar">
                        <!--用于展示上传图标，当imageUrl为null时，就展示空白，当imageUrl有了值，就会展示指向该地址的图片-->
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>

                <el-form-item label="组织机构代码">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>

                <el-form-item label="证件有效期类型">
                    <el-radio v-model="validityOfCertificate" label="0">定期</el-radio>
                    <el-radio v-model="validityOfCertificate" label="1">长期</el-radio>
                </el-form-item>
                <el-form-item label="证件生效日期" required>
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker type="date" placeholder="选择日期" v-model="form.name" style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>

                <el-form-item v-if="validityOfCertificate!=1" label="证件失效日期" required>
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker type="date" placeholder="选择日期" v-model="form.name" style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                </span>



                <div v-if="type=='0'" class="label-title-bottom">
                    <label><span class="span-font-color">|</span>经营者证件</label>
                </div>

                <div v-if="type=='1' || type=='2' || type=='3'" class="label-title-bottom">
                    <label><span class="span-font-color">|</span>法定代表人证件</label>
                </div>

                <el-form-item label="证件类型" prop="region">
                    <el-select v-model="form.idDocType" placeholder="请选择">
                        <el-option label="中国大陆居民-身份证" value="IDENTIFICATION_TYPE_IDCARD"></el-option>
                        <el-option label="中国香港居民-来往内地通行证" value="IDENTIFICATION_TYPE_HONGKONG_PASSPORT"></el-option>
                        <el-option label="中国澳门居民-来往内地通行证" value="IDENTIFICATION_TYPE_MACAO_PASSPORT"></el-option>
                        <el-option label="中国台湾居民-来往大陆通行证" value="IDENTIFICATION_TYPE_TAIWAN_PASSPORT"></el-option>
                        <el-option label="其他国家或地区居民-护照" value="IDENTIFICATION_TYPE_OVERSEA_PASSPORT"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="身份证人像面照片">
                    <el-upload
                            class="avatar-uploader"
                            action="/upload/img"
                            :auto-upload="autoUpload"
                            name="file"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccessIdCardCopy"
                            :before-upload="beforeAvatarUpload">
                        <!--用于上传图片预览-->
                        <img v-if="form.idCardCopy" :src="form.idCardCopy"  class="avatar">
                        <!--用于展示上传图标，当imageUrl为null时，就展示空白，当imageUrl有了值，就会展示指向该地址的图片-->
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>

                <el-form-item label="身份证国徽面照片">
                    <el-upload
                            class="avatar-uploader"
                            action="/upload/img"
                            :auto-upload="autoUpload"
                            name="file"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccessIdCardNational"
                            :before-upload="beforeAvatarUpload">
                        <!--用于上传图片预览-->
                        <img v-if="form.idCardNational" :src="form.idCardNational"  class="avatar">
                        <!--用于展示上传图标，当imageUrl为null时，就展示空白，当imageUrl有了值，就会展示指向该地址的图片-->
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>

                <el-form-item label="身份证姓名">
                    <el-input v-model="form.idCardName"></el-input>
                </el-form-item>

                <el-form-item label="身份证件号码">
                    <el-input v-model="form.idCardNumber"></el-input>
                </el-form-item>

                <el-form-item label="证件有效期类型">
                    <el-radio v-model="validityOfCertificate" label="0">定期</el-radio>
                    <el-radio v-model="validityOfCertificate" label="1">长期</el-radio>
                </el-form-item>
                <el-form-item label="证件生效日期" required>
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker type="date" placeholder="选择日期" v-model="form.cardPeriodBegin" style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>

                <el-form-item v-if="validityOfCertificate!=1" label="证件失效日期" required>
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker type="date" placeholder="选择日期" v-model="form.cardPeriodEnd" style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <!--type=0,1时展示-->
                <el-form-item v-if="type !='2'" label="是否为受益所有人">
                    <el-radio v-model="form.owner"  label="true">是</el-radio>
                    <el-radio v-model="form.owner" label="false">否，非经营者</el-radio>
                </el-form-item>
                <span v-if="form.owner=='false' ">
                    <div class="label-title-bottom">
                    <label><span class="span-font-color">|</span>受益人所有人证件</label>
                </div>
                    <el-form-item label="证件类型" prop="region">
                    <el-select v-model="form.idType" placeholder="请选择">
                        <el-option label="中国大陆居民-身份证" value="IDENTIFICATION_TYPE_IDCARD"></el-option>
                        <el-option label="中国香港居民-来往内地通行证" value="IDENTIFICATION_TYPE_HONGKONG_PASSPORT"></el-option>
                        <el-option label="中国澳门居民-来往内地通行证" value="IDENTIFICATION_TYPE_MACAO_PASSPORT"></el-option>
                        <el-option label="中国台湾居民-来往大陆通行证" value="IDENTIFICATION_TYPE_TAIWAN_PASSPORT"></el-option>
                        <el-option label="其他国家或地区居民-护照" value="IDENTIFICATION_TYPE_OVERSEA_PASSPORT"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="身份证人像面照片">
                    <el-upload
                            class="avatar-uploader"
                            action="/upload/img"
                            :auto-upload="autoUpload"
                            name="file"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccessUboIdCardCopy"
                            :before-upload="beforeAvatarUpload">
                        <!--用于上传图片预览-->
                        <img v-if="form.uboIdCardCopy" :src="form.uboIdCardCopy"  class="avatar">
                        <!--用于展示上传图标，当imageUrl为null时，就展示空白，当imageUrl有了值，就会展示指向该地址的图片-->
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>

                <el-form-item label="身份证国徽面照片">
                    <el-upload
                            class="avatar-uploader"
                            action="/upload/img"
                            :auto-upload="autoUpload"
                            name="file"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccessUboIdCardNational"
                            :before-upload="beforeAvatarUpload">
                        <!--用于上传图片预览-->
                        <img v-if="form.uboIdCardNational" :src="form.uboIdCardNational"  class="avatar">
                        <!--用于展示上传图标，当imageUrl为null时，就展示空白，当imageUrl有了值，就会展示指向该地址的图片-->
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>

                <el-form-item label="身份证姓名">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>

                <el-form-item label="身份证件号码">
                    <el-input v-model="form.idNumber"></el-input>
                </el-form-item>

                <el-form-item label="证件有效期类型">
                    <el-radio v-model="validityOfCertificate1" label="0">定期</el-radio>
                    <el-radio v-model="validityOfCertificate1" label="1">长期</el-radio>
                </el-form-item>
                <el-form-item label="证件生效日期" required>
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker type="date" placeholder="选择日期" v-model="form.idPeriodBegin" style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>

                <el-form-item v-if="validityOfCertificate1=='0'" label="证件失效日期" required>
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker type="date" placeholder="选择日期" v-model="form.idPeriodEnd" style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                </span>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit">确认保存</el-button>
                </el-form-item>
            </el-form>
        </el-row>
    </div>
</div>

</div>
<script type="module">
    import bnApi from '../../operation/js/config/public.js';
    var vue = new Vue({
        el: '#app',
        data: {
            autoUpload: true,
            type:'',
            validityOfCertificate:'0',//证件有效期
            validityOfCertificate1:'0',//证件有效期
            businessLicenseType:'0',//营业执照类型
            form: {
                accountBank: '',
                accountName: '',
                accountNumber: '',
                activitiesAdditions: '',
                activitiesId: '',
                activitiesRate: '',
                additionInfo: '',
                appAppid: '',
                appInfo: '',
                appPics: '',
                appSubAppid: '',
                bankAccountInfo: '',
                bankAccountType: '',
                bankAddressCode: '',
                bankBranchId: '',
                bankName: '',
                bizAddressCode: '',
                bizStoreAddress: '',
                bizStoreInfo: '',
                bizStoreName: '',
                bizSubAppid: '',
                businessAdditionMsg: '',
                businessAdditionPics: '',
                businessCode: '',
                businessInfo: '',
                businessLicenseInfo: '',
                cardPeriodBegin: '',
                cardPeriodEnd: '',
                certCopy: '',
                certLegalPerson: '',
                certMerchantName: '',
                certNumber: '',
                certType: '',
                certificateInfo: '',
                certificateLetterCopy: '',
                commercialTenantId: '',
                companyAddress: '',
                contactEmail: '',
                contactIdNumber: '',
                contactInfo: '',
                contactName: '',
                createTime: '',
                docPeriodBegin: '',
                docPeriodEnd: '',
                domain: '',
                id: '',
                idCardCopy: '',
                idCardInfo: '',
                idCardName: '',
                idCardNational: '',
                idCardNumber: '',
                idDocCopy: '',
                idDocInfo: '',
                idDocName: '',
                idDocNumber: '',
                idDocType: '',
                idNumber: '',
                idPeriodBegin: '',
                idPeriodEnd: '',
                idType: '',
                identityInfo: '',
                indoorPic: '',
                legalPerson: '',
                legalPersonCommitment: '',
                legalPersonVideo: '',
                licenseCopy: '',
                licenseNumber: '',
                merchantName: '',
                merchantShortname: '',
                miniProgramAppid: '',
                miniProgramInfo: '',
                miniProgramPics: '',
                miniProgramSubAppid: '',
                mobilePhone: '',
                mpAppid: '',
                mpInfo: '',
                mpPics: '',
                mpSubAppid: '',
                name: '',
                openid: '',
                organizationInfo: '',
                otherIdDocCopy: '',
                owner: 'true',
                periodBegin: '',
                periodEnd: '',
                qualificationType: '',
                qualifications: '',
                salesInfo: '',
                salesScenesType: '',
                servicePhone: '',
                settlementId: '',
                settlementInfo: '',
                storeEntrancePic: '',
                subCorpId: '',
                subjectInfo: '',
                subjectType: '',
                uboIdCardCopy: '',
                uboIdCardNational: '',
                uboInfo: '',
                updateTime: '',
                webAppid: '',
                webAuthorisation: '',
                webInfo: '',
                weworkInfo: '',
                weworkPics: '',
                step:1,//步进
                status:0,//审核状态
                customsStatus:0//完成状态
            },
            img:""
        },
        methods: {
            onSubmit() {
                console.log('submit!');
                bnApi.requestPost("/WxIntoPieces/add",this.form).then(res=>{
                    if(res.success){
                        location.href = "add_merchants_wx1.html";
                    }
                });
            },
            //营业执照
            handleAvatarSuccess(res){
                if(res.success){
                    this.form.licenseCopy = res.object.webPath;
                }


            },
            //身份证人面像
            handleAvatarSuccessIdCardCopy(res){
                if(res.success){
                    this.form.idCardCopy = res.object.webPath;
                }
            },
            //身份证国徽面
            handleAvatarSuccessIdCardNational(res){
                if(res.success){
                    this.form.idCardNational = res.object.webPath;
                }
            },
            //受益人身份证人面像
            handleAvatarSuccessUboIdCardCopy(res){
                if(res.success){
                    this.form.uboIdCardCopy = res.object.webPath;
                }
            },
            //受益人身份证国徽面
            handleAvatarSuccessUboIdCardNational(res){
                if(res.success){
                    this.form.uboIdCardNational = res.object.webPath;
                }
            },
            beforeAvatarUpload(file){
                // 可以在tomcat的conf的web.xml中找到相对应的文件类型
                var isJPG = file.type === 'image/jpeg'||'image/gif'||'image/png';

                var isLt2M = file.size / 1024 / 1024 < 4;
                if (!isLt2M) {
                    this.$message.error('上传套餐图片大小不能超过 4MB!');
                }
                return isJPG && isLt2M;
            },
            agreeChange(val){
                console.log("是否为经营者",val)
            },
            //参数截取
            getQueryVariable:function (variable) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    if(pair[0] == variable){return pair[1];}
                }
                return(false);
            }
        },
        mounted(){
            this.type = this.getQueryVariable("type");
            this.form.commercialTenantId = this.getQueryVariable("id");
            console.log("type值：",this.type)
        }
    })
</script>
</body>


</html>